<template> 
    <div class="main">
        <div class="head_login">
            <div class="head_t shrink">
                <span class="iconfont icon-shezhi"></span>
                <span class="iconfont icon-xiaoxi1"></span>
            </div>
            <div class="head_c">
                <span class="iconfont icon-nanrentouxiang"></span>
                请登录
            </div>
            <div class="head_b">
                <li>
                    <span class="iconfont icon-xin"></span>
                    <br />商品收藏
                </li>
                <li>
                    <span class="iconfont icon-icon1001"></span>
                    <br />我的验光单
                </li>
                <li>
                    <span class="iconfont icon-zuji"></span>
                    <br />我的足迹
                </li>
            </div>
        </div>
        <div class="mypub shrink">
            <div class="mypub_top">
                <li class="mypub_top_L">
                    <span class="iconfont icon-dingdan" style="color:#3baeda"></span>
                    我的订单
                </li>
                <li class="mypub_top_R">
                    查看全部订单
                    <span class="iconfont icon-arrow-right1"></span>
                </li>
            </div>
            <div class="mypub_bottom">
                <li>
                    <span class="iconfont icon-qianbao"></span>
                    <br />待付款
                </li>
                <li>
                    <span class="iconfont icon-shouhuoxinxi"></span>
                    <br />待收货
                </li>
                <li>
                    <span class="iconfont icon-huoche"></span>
                    <br />待自提 
                </li>
                <li>
                    <span class="iconfont icon-shenhebijijishibenxiezi"></span>
                    <br />已完成 
                </li>
                <li>
                    <span class="iconfont icon-tuikuan"></span>
                    <br />退款/退货 
                </li>
            </div>

        </div>
        <div class="mypub shrink">
            <div class="mypub_top">
                <li class="mypub_top_L">
                    <span class="iconfont icon-qianbao-shi" style="color:#48cfae"></span>
                    我的财产
                </li>
                <li class="mypub_top_R">
                    查看全部财产
                    <span class="iconfont icon-arrow-right1"></span>
                </li>
            </div>
            <div class="mypub_bottom">
                <li>
                    <span class="iconfont icon-qiandai"></span>
                    <br />预存款
                </li>
                <li>
                    <span class="iconfont icon-yhq"></span>
                    <br />充值卡
                </li>
                <li>
                    <span class="iconfont icon-yhq"></span>
                    <br />优惠券
                </li>
                <li>
                    <span class="iconfont icon-hongbao"></span>
                    <br />红包
                </li>
                <li>
                    <span class="iconfont icon-jifen"></span>
                    <br />积分
                </li>
            </div>

        </div>
        <div class="mypub shrink">
            <div class="mypub_top">
                <li class="mypub_top_L">
                    <span class="iconfont icon-xingzhuang-copy" style="color:#ac92ed"></span>
                    收货地址管理
                </li>
                <li class="mypub_top_R">
                    <span class="iconfont icon-arrow-right1"></span>
                </li>
            </div>
            <div class="mypub_top">
                <li class="mypub_top_L">
                    <span class="iconfont icon-shezhi1" style="color:#f882aa"></span>
                    用户设置
                </li>
                <li class="mypub_top_R">
                    <span class="iconfont icon-arrow-right1"></span>
                </li>
            </div>
        </div>

    </div>
</template> 

<script>     
export default {
    
}
</script>

<style lang="scss">
.main{
    overflow: auto;
}
.shrink{
    padding: 0 0.26rem;   
}	
.head_login{
    background: #fb6e52;
    color: #fff;
    border-bottom:  0.24rem solid #e9ecec;
    .head_t{
        margin-top: 0.76rem;
        display: flex;
        justify-content: space-between; 
        span{
            font-size: 0.6rem;
            

        }
        
    }
    .head_c{
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 0.34rem;
        line-height: 0.82rem;

        span{
            font-size: 1rem;
            display: inline-block;
            height: 1.6rem;
            width: 1.6rem;
            border-radius: 100%;
            background:rgba($color: #000000, $alpha:0.1);
            line-height: 1.6rem;
            text-align: center;
        }
        
    }
    .head_b{
        display: flex;
        justify-content: space-around;
        font-size: 0.24rem;
        line-height: 0.24rem;
        background: rgba($color: #000000, $alpha: 0.1);
        li{
            text-align: center;
            margin-bottom: 0.2rem;
            span{
                font-size: 0.6rem;
                line-height: 0.8rem;

            }
        }
    }

} 
.mypub{
    border-bottom: 0.24rem solid #e9ecec;
    background: #fff;
    .mypub_top{
        display: flex;
        justify-content: space-between;
        border-bottom: 0.02rem solid #e8e8e8;
        align-items: center;
        height: 0.96rem;

        .mypub_top_L{
            display: flex;
            line-height: 0.96rem;
            font-size: 0.32rem;
            color:#000;
            span{
                font-size: 0.6rem;
                margin-right: 0.05rem;
            }

        }
        .mypub_top_R{
            display: flex;
            font-size: 0.28rem;
            color: #595858;
            line-height: 0.96rem;
            span{
                color: 0.3rem;
                font-size: 0.4rem;
            }
        }
    }
    .mypub_bottom{
        display: flex;
        border-bottom: 0.02rem solid #e8e8e8;
        height: 1.54rem;
        align-items: center;
        li{
            font-size:0.28rem;
            color:#757575;
            text-align: center;
            flex: 20%;
            span{
                font-size: 0.7rem;
                color: #000;
            } 
        }

    }
    

}
</style>
